<template>
	<div class="page-header">
		<div class="page-home"><i class="home-icon"></i></div>		
		<div class="page-search">
			<router-link to="/search">
				<div class="search-cont">
					<i class="search-icon"></i>输入城市/景点/游玩主题
				</div>
			</router-link>
		</div>		
		<router-link to="/city">
			<div class="page-city">{{this.city}}<i class="city-icon"></i></div>
		</router-link>
	</div>
</template>
<script>
import { mapState } from 'vuex'
export default {
	name: 'HomeHeader',
	computed: {
		...mapState(['city'])
	}
}
</script>
<style lang="scss" scoped>
@import '~@/assets/scss/setting';
@import '~@/assets/scss/css3';
@import '~@/assets/scss/mixin';
@import '~@/assets/scss/reset';
@import '~@/assets/scss/style';

.page-header {
	height: px2rem(88px);
	background-color: $bgColor;
	display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: box;
    color: #fff;
    a {
    	color: #fff;
    }
}
.page-home,.page-city {
	display: inline-block;
	vertical-align: middle;	
	text-align: center;
	line-height: px2rem(88px);
}
.page-home {
	width: px2rem(88px);
	height: px2rem(88px);	
}
.page-search {
	box-flex: 1;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -ms-flex: 1;
    .search-cont {
    	margin-top: px2rem(14px);
	    padding: 0 px2rem(10px);
	    height: px2rem(60px);
	    line-height: px2rem(60px);
	    border-radius: px2rem(6px);
	    background-color: #fff;
	    color: #e4e7ea;
    }
    
}
.page-city {
	min-width: px2rem(88px);
	padding: 0 px2rem(20px);
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.city-icon {
	margin-left: px2rem(8px);
	font-size: 16px;
}
</style>